<template>
  <DropdownToolbar
    title="上传视频"
    :visible="state.visible"
    @onChange="onChangeState(state.visible)"
  >
    <el-dropdown>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-upload
              style="display: inline-block"
              :show-file-list="false"
              name="filedatas"
              action=""
              :http-request="uploadVideo"
              multiple
            >
              <span>上传视频</span>
            </el-upload>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="dialogVisible = true">添加视频地址</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
      <div style="padding-top: 2px">
        <el-icon>
          <Edit />
        </el-icon>
      </div>
    </el-dropdown>
    <el-dialog
      v-model="dialogVisible"
      title="添加视频"
      width="500"
      align-center
    >
      <el-input v-model="videoUrl" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addVideo">添加</el-button>
        </div>
      </template>
    </el-dialog>
  </DropdownToolbar>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { DropdownToolbar } from "md-editor-v3";
import type { InsertContentGenerator } from 'md-editor-v3';
import { Insert, PreviewThemes, Themes } from 'md-editor-v3';
import type { PropType, VNode } from 'vue';

const props = defineProps({
  modelValue: {
    type: String as PropType<string>,
    default: ''
  },
  /**
   * 插入后选中内容
   */
  selectAfterInsert: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  /**
   * ==这个默认注入，不用提供
   */
  insert: {
    type: Function as PropType<Insert>,
    default: () => null
  },
  theme: {
    type: String as PropType<Themes>
  },
  previewTheme: {
    type: String as PropType<PreviewThemes>
  },
  language: {
    type: String as PropType<string>,
    default: ''
  },
  /**
   * ==结束
   */
  /**
   * hover显示，或者开启工具栏描述时展示在图标下方
   */
  title: {
    type: String as PropType<string>,
    default: ''
  },
  /**
   * 显示在工具栏上的内容
   */
  trigger: {
    type: [String, Object] as PropType<string | VNode>,
    default: ''
  }
});
const dialogVisible = ref(false);
const videoUrl = ref("");

const state = reactive({
  visible: false,
  modalFullscreen: false,
});

function onChangeState(visible) {
  state.visible = visible;
};

//上传视频
function uploadVideo(param: any) {

}
const emit = defineEmits<(e: "update:modelValue", value: string) => void>()

/**
 * 添加网络视频地址
 */
function addVideo() {
  const generator: InsertContentGenerator = () => {
    return {
      targetValue: '<video controls src="'+videoUrl.value+'" style="width: 100%;"/>',
      select: props.selectAfterInsert,
      deviationStart: 0,
      deviationEnd: 0
    };
  };
  props.insert(generator);
  dialogVisible.value = false
}

/**
 * modal-toolbar组件不会再关闭时销毁子组件，这时需要区别预览扩展组件的标题ID生成方式和编辑器的标题ID生成方式
 *
 * @see https://github.com/imzbf/md-editor-v3/issues/207
 **/
const readingHeadingId = (_text: string, _level: number, index: number) =>
  `read-ex-heading-${index}`;
</script>

<script lang="ts">
export default {
  name: 'UploadVideo'
};
</script>
